<template>
  <div class="Time" @click="changemenu" title="点击出现菜单栏">
    <span>{{ currentTime.hour }}:</span>
    <span>{{ currentTime.minute }}</span>
  </div>
  <div class="Date">
    <span>{{ currentTime.year }}年</span>
    <span>{{ currentTime.month }}月</span>
    <span>{{ currentTime.day }}日&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span>{{ currentTime.weekday }}</span>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
import { getCurrentTime } from "@/utils/getTime";
import { homepage } from "@/store/index.js";
const store = homepage();

// 当前时间
let currentTime = ref({});
let TimeInterval = null;
// 初始化渲染
onMounted(() => {
  TimeInterval = setInterval(() => {
    currentTime.value = getCurrentTime();
  }, 1000);
});
// 清除定时器
onBeforeUnmount(() => {
  clearInterval(TimeInterval);
});

// 菜单栏
let changemenu = () => {
  store.menuSelectShow = !store.menuSelectShow;
  if (store.menuSelectShow) {
    store.Search();
  } else {
    store.clearsearch();
  }
};
</script>

<style lang="scss" scoped>
* {
  color: #fff;
}
.Time {
  font-size: 72px;
  cursor: pointer;
}
.Date {
  font-size: 14px;
  margin-top: -10px;
}
</style>
